import React, { FC, useEffect } from 'react'
import XgPlayer, { IPlayerOptions } from 'xgplayer';
import { throttle } from 'lodash';
import { autoPlayerNext } from '@/utils/playerPlugin'
import { isView } from '@/utils/tools';
interface Props {
    // 当前视频id
    id?: string;
    // 应该传入一个视频列表，当播放的时候传出当前播放的id
    videoList?: Array<any>;
    // url播放器播放的第一个视频
    url?: string;
    urlList?: string[];
    poster?: string;
    playbackRate?: number[]; //播放速度
    autoPlay?: boolean; //自动播放
    // 记忆播放视频起播时间（单位：秒）
    lastPlayTime?: number;
    // 忽略的配置
    ignores?: Array<'cssFullscreen' | 'danmu' | 'enter' | 'download' | 'errorRetry' | 'time' | 'localPreview' | 'logger' | 'memoryPlay' | 'pip' | 'playNext' | 'reload' | 'rotate' | 'screenShot' | 'definition' | 'error' | 'fullscreen' | 'i18n' | 'loading' | 'mobile' | 'pc' | 'play' | 'playbackRate' | 'poster' | 'progress' | 'replay' | 'start' | 'volume'>;
    pip?: boolean;
    cssFullscreen?: boolean;
    miniplayer?: boolean;

    children?: React.ReactNode;
    // 事件函数,参数播放的视频id
    play?: (id: string) => void; //可以统计播放量
    onEnded?: () => void;
    //children?: React.ReactChild | React.ReactChild[];
    // children: JSX.Element | JSX.Element[] | string | string[];
    // children?: JSX.Element | JSX.Element[];
    // 其他属性
    [key: string]: any;
}

// 注册播放器插件
XgPlayer.install('autoPlayerNext', autoPlayerNext);
/**
 * 播放器组件 video.js
 * @param props 
 * @returns 
 * 根据props.id 找到当前播放的视频，整个video列表作为播放的列表
 */

const Player: FC<Props> = (props) => {
    useEffect(() => {
        const player = new XgPlayer({
            id: 'video',
            url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
            width: '100%',
            // fluid: true,
            height: 500,
            // fitVideoSize: 'fixHeight',
            controls: props.controls, //关闭控制条
            lang: 'zh-cn',
            // 音量控制 0-1
            volume: 1,
            // 自动播放
            autoplay: props.autoPlay,
            // 忽略重播
            ignores: props.ignores || [],
            // 封面
            poster: props.poster,
            // 播放速度
            playbackRate: props.playbackRate,
            // 初始播放速度
            defaultPlaybackRate: 1,
            // 记忆播放
            lastPlayTime: props.lastPlayTime, //视频起播时间（单位：秒）
            // lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒）
            // 下一个
            playNext: {
                urlList: props.urlList || [],
            },
            // 画中画
            pip: props.pip,
            // 网页全屏，区别于屏幕全屏
            cssFullscreen: props.cssFullscreen,
            miniplayer: props.miniplayer,
            miniplayerConfig: {
                bottom: 200,
                right: 0,
                width: 320,
                height: 180
            },
            // keyShortcutStep: { //设置调整步长
            //     currentTime: 15, //播放进度调整步长，默认10秒
            //     volume: 0.2 //音量调整步长，默认0.1
            // }
        });

        // 画中画功能应该是在页面向下滑动盖着播放器的时候自动调用
        const dom = document.getElementById('wrap-video');
        function handlePlayer(e: any) {
            if (dom && isView(dom)) {
                return player.getMiniplayer();
            }
            player.exitMiniplayer();
        }
        const fn = throttle(handlePlayer, 1000)
        window.addEventListener('scroll', fn)
        // 函数监听
        player.on('play', function () {
            // 统计播放量使用
            props.play && props.play(props.id as string)
        })



        return () => {
            // 页面卸载时处理
            window.removeEventListener('scroll', fn)
        }
    }, [])

    return (
        <>
            <div id='wrap-video' >
                <div id='video' ></div>
            </div>
        </>
    )
}



Player.defaultProps = {
    autoPlay: false,
    // 默认第一个要播放的视频
    url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
    controls: true,
    fluid: true,
    // 播放速率
    playbackRate: [0.5, 0.75, 1, 1.5, 2],
    ignores: ["replay"],
    lastPlayTime: 0,
    pip: true,
    cssFullscreen: true,
    miniplayer: false,
    // 视频列表，处理数据的时候要忽略url的数据，默认url就是播放的第一个
    urlList: [
        'http://vjs.zencdn.net/v/oceans.mp4',
        'https://media.w3.org/2010/05/sintel/trailer.mp4',
    ]
}

export default Player;
